<template>
  <div class="nav-bottom fixed-bottom">
    <ul class="nav-bottom__list">
      <li class="nav-bottom__item" :class="{'active':selected == 'home'}">
        <div @click="goHome">
					<img v-if="selected == 'home'" class="item-icon"  src="@/assets/images/physio/tab_home2.png" />
					<img v-else class="item-icon" src="@/assets/images/physio/tab_home.png" />
          <p>首页</p>
				</div>
      </li>
      <li class="nav-bottom__item" :class="{'active':selected == 'physioList'}">
        <!--<router-link to="/physioList">					-->
					<div @click="physioList">
						<img v-if="selected == 'physioList'" class="item-icon" src="@/assets/images/physio/tab_physio2.png" />
						<img v-else class="item-icon" src="@/assets/images/physio/tab_physio.png" />
						<p>理疗师</p>
					</div>
        <!--</router-link>-->
      </li>
      <li class="nav-bottom__item" :class="{'active':selected == 'physioMyOrder'}">
        <!--<router-link to="/physioMyOrder">-->
					<div @click="physioMyOrder">
						<img v-if="selected == 'physioMyOrder'" class="item-icon" src="@/assets/images/physio/tab_order2.png" />
						<img v-else class="item-icon"  src="@/assets/images/physio/tab_order.png" />
						<p>订单</p>
					</div>
        <!--</router-link>-->
      </li>
      <li class="nav-bottom__item" :class="{'active':selected == 'usercard'}">
        <div @click="goMy" >
					<img v-if="selected == 'usercard'"  class="item-icon" src="@/assets/images/physio/tab_my2.png" />
					<img v-else class="item-icon" src="@/assets/images/physio/tab_my.png" />
          <p>我的</p>
				</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: ''
    }
  },
  created() {
    // 获取当前路由名称，根据该名称给当前nav添加类名active
    this.selected = this.$route.name
  },
	methods:{

		goHome(){
			window.location.href = this.$LocalDomain + '/m/home/union'
		},		
		goMy(){
			window.location.href = this.$LocalDomain + '/m/user/usercard'
		},
		physioList(){
			this.$router.push('/physioList')
		},
		physioMyOrder(){
			this.$router.push('/physioMyOrder')
		}
	}
}
</script>
<style lang="scss" scoped>
	.nav-bottom {
		width: 100%;
		height: 120px;
		margin: auto;
		background: $colorBg;
	}

	.nav-bottom__list {
		height: 100%;
		@extend %flex-basic;
		@include flex-content(center, center);
	}

	.nav-bottom__item {
		flex: 1;
		text-align: center;
		font-size: 24px;
		color: $color9;
		.svg-icon {
			font-size: 36px;
		}
		.camera {
			width: 100px;
			height: 100px;
			margin: auto;
			border: 2px solid #929292;
			border-radius: 50%;
			@extend %flex-basic;
			@include flex-content(center, center);
			.camera_img {
				width: 50px;
				height: 50px;
			}
		}
	}

	.nav-bottom__item.active {
		color: $physio-primary1;
	}

	a {
		color: inherit;
	}
	img{
		width: 48px;
	}
	.item-icon{
		width: 48px;
		height: 48px;
	}
</style>

